$(function() {

    //1.文件预览
    //1.给file表单元素注册onchange事件
    $('#inputCover').change(function() {
        //1.2 获取用户选择的图片
        let file = this.files[0];
        //1.3 将文件转为src路径
        let url = URL.createObjectURL(file);
        //1.4 将url路径赋值给img标签的src
        $('.article_cover').attr('src', url);
    });




    //2.文件列表请求
    $.ajax({
        url: BigNew.category_list,
        type: 'get',
        dataType: 'json',
        success: function(backData) {
            console.log(backData);
            //模板引擎渲染
            $('.category').html(template('cat_list', backData));
        }
    });

    //  3:完成 日期插件 和 富文本编辑器插件布局
    //    注意点： 默认jedate层级是2099， wangeditor层级是10000. 会遮盖日期插件
    //    解决方案：设置jedate插件的层级高于10000
    //   

    //* 3.1 jedate初始化 
    jeDate("#testico", {
        format: "YYYY-MM-DD",
        multiPane: true, //true 单面板  false:双面板    
        isinitVal: true, //false:不初始化时间  true:初始化时间 
        festival: true, //false：不显示农历    true:显示农历
        zIndex: 10001
            // theme:{ bgcolor:"#f00",color:"#0f0", pnColor:"#00f"}, 
    });
    //* 3.2 wangeditor初始化 
    const E = window.wangEditor
    const editor = new E('#div1')
        // 或者 const editor = new E( document.getElementById('div1') )
    editor.create()



    //4.根据id，渲染对应的文章页码
    //  获取从article_list.html页面传递过来的文章id
    //  跳转过来时的地址带有id差数，把id切割出来
    //   window.location.href.split('=')[1];
    $.ajax({
        url: BigNew.article_search,
        type: 'get',
        dataType: 'json',
        data: {
            id: window.location.href.split('=')[1]
        },
        success: function(backData) {
            console.log(backData);
            //渲染页面
            $('.title').val(backData.data.title);
            $('.category').val(backData.data.categoryId);
            $('.article_cover').attr('src', backData.data.cover);
            //日期插件
            $('#testico').val(backData.data.date);
            //编辑器 : 插件自带语法
            editor.txt.html(backData.data.content);

        }
    });



    //5.文件提交 ： 已发布 草稿
    $('.btn-edit,.btn-draft').click(function(e) {
        //阻止表单默认跳转
        e.preventDefault();
        //(1)获取文章状态
        let state = $(this).hasClass('btn-edit') ? '已发布' : '草稿';
        //(2)formdata获取参数
        /* 
        注意点： formdata默认只能获取表单中有name属性的表单值，没有name则无法获取。
        问题 ： formdata获取的参数  <  接口文档参数
        解决方案： 使用append()手动追加
        */
        let fd = new FormData($('form')[0]);
        fd.append('id', window.location.href.split('=')[1]);
        fd.append('date', $('#testico').val());
        fd.append('content', editor.txt.html());
        fd.append('state', state);
        //(3)ajax发送请求
        $.ajax({
            url: BigNew.article_edit,
            type: 'post',
            dataType: 'json',
            data: fd,
            contentType: false,
            processData: false,
            success: function(backData) {
                console.log(backData);
                if (backData.code == 200) {
                    alert('修改成功');

                    //跳转列表页
                    window.location.href = './article_list.html';
                }

            }
        });
    });
})